<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<script src="http://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
		<link href="http://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
		<link href="http://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
		<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css">
		<script src="http://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script>
		<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
		<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>


		<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/page-jump-to/bootstrap-table-page-jump-to.min.js"></script>
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
		<title>Bootstrap Table getSelections例子</title>
		<style>
			.table-demo {
				width: 80%;
				margin: 30px auto 0px auto;
			}
		</style>
	</head>

	<body>
		<div id="toolbar">
			<button onclick="getSels()">获取选中项目 </button>
		</div>
		<div class="table-demo">
			<table id="table"></table>
		</div>
		<script>
			// 设置需要显示的列
			var columns = [{
				field: "checked",
				title: '编号',
				checkbox: true
			}, {
				field: 'id',
				title: '名称',
				/*cellStyle设置显示的样式
				 *Use cellStyle to define the style of a cell.
				 **/
				cellStyle: function(value, row, index,field){
					var classes = [
				      'bg-blue',
				      'bg-green',
				      'bg-orange',
				      'bg-yellow',
				      'bg-red'
				    ]
				
				    if (index % 2 === 0 && index / 2 < classes.length) {
				      return {
				        classes: classes[index / 2]
				      }
				    }
				    return {
				      css: {
				        color: 'red'	
				      }
				    }
				}
				,
				clickToSelect: false //改行点击不选中
			}, {
				field: 'name',
				title: '库存',
				/*formatter设置显示的内容，<td>中return的标签或html</td>
				 * Use formatter column option to format the display of bootstrap table column.
				 **/
				formatter(value, row, index,field){
					var icon = row.id % 2 === 0 ? 'fa-star' : 'fa-star-and-crescent'
    				return '<i class="fa ' + icon + '"></i> ' + value
				}
			}, {
				field: 'price',
				title: '价格',
				formatter(value, row, index){
				    // 16777215 == ffffff in decimal
				    var color = '#' + Math.floor(Math.random() * 6777215).toString(16)
				    return '<div style="color: ' + color + '">' +
				      '<i class="fa fa-dollar-sign"></i>' +
				      value.substring(1) +
				      '</div>'
				}
			}, {
				field: 'operatecc',
				title: '操作',
				formatter: operateFormatter,
				events: {
		            "click .like" : function(e,value,row,index){alert("编辑了caseId是："+row.id)},
		            "click .remove" : function(e,value,row,index){alert("编辑了caseId是："+index)}
		    	},
				clickToSelect: false ,//改行点击不选中
				width: 10,
				widthUnit: '%'
			}
			
			];

			//1.设置maintainSelected :true开启保持分页状态
			$('#table').bootstrapTable({
				url: 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data?offset=0&limit=100',
				pagination: true, //开启分页
				search: true, //开启刷选
				columns: columns,
				pageSize: 10,
				toolbar: "#toolbar",
				height: 600,
				clickToSelect: true,	//点击选中
				showJumpTo: true //设置跳转到
			});

			function getSels() {
				//2.获取选中的数据
				var rows = $('#table').bootstrapTable('getSelections');
				alert(JSON.stringify(rows));
			}
			
		  var $table = $('#table')

		  function operateFormatter(value, row, index) {
		    return [
		      '<a class="like" href="javascript:void(0)" title="Like">',
		      '<i class="fa fa-heart"></i>',
		      '</a>  ',
		      '<a class="remove" href="javascript:void(0)" title="Remove">',
		      '<i class="fa fa-trash"></i>',
		      '</a>'
		    ].join('')
		  }
		</script>
	</body>

</html>